<template>
  <div><h2>违约管理</h2></div>
  <div class="container">
    <h2>Login</h2>
    <label>
      Account:
      <input type="text" minlength="3" maxlength="20" id="account" v-model="user.account">
    </label>
    <label>
      Password:
      <input type="password" id="password" v-model="user.password">
    </label>
    <label>
      Role:
      <select id="role" v-model="user.role">
        <option value="1">Applicant</option>
        <option value="2">Approver</option>
      </select>
    </label>
    <div class="btn-container">
      <input type="submit" value="Login" @click.prevent="onLoginClick">
      <input type="submit" value="ToRegister" @click="changePage">
    </div>
    <div>
      <button @click="toPie">饼图</button>
      <button @click="toLine">折线图</button>
    </div>


  </div>

</template>

<script>
export default {
  name: 'Login',
  data(){
    return {

      user: {
        account: "",
        password: "",
        role: "1"
      },

      applicant: {
        applicantAccount: "",
        applicantPassword: ""
      },

      approver: {
        approverAccount: "",
        approverPassword: ""
      }
    }
  },

  methods: {


    async onLoginClick() {
      if (this.user.role==="1"){
        this.applicant.applicantAccount=this.user.account
        this.applicant.applicantPassword=this.user.password
        const {data: res} = await this.$http.post('/applicant/login' , this.applicant)
        console.log(res.data)
        if (res.data===0){
          alert('登录成功')
          localStorage.setItem("applicantAccount",this.user.account)
          await this.$router.push('/applicantMain')
        }else {
          alert('登录失败')
        }

      }

      if (this.user.role==="2"){
        this.approver.approverAccount=this.user.account
        this.approver.approverPassword=this.user.password
        const {data: res} = await this.$http.post('/approver/login' , this.approver)
        console.log(res.data)
        if (res.data===0){//登录成功
          alert('登录成功')
          localStorage.setItem("approverAccount",this.user.account)
          await this.$router.push('/approverMain')
        }else {
          alert('登录失败')
        }


      }
    },

    async changePage() {
      await this.$router.push('/register')
    },
    async toPie(){
      await this.$router.push('/pieEcharts')
    },
    async toLine(){
      await this.$router.push('/lineEcharts')
    }


  }

}


</script>

<style lang="less" scoped>
.container {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.container h2 {
  text-align: center;
}

.container label,
.container input[type="submit"] {
  display: block;
  margin-bottom: 10px;
}

.container input[type="text"],
.container input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.container input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.container .btn-container {
  display: flex;
  justify-content: space-between;
}

.container .btn-container input[type="submit"] {
  flex-basis: 48%;
}
</style>
